<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
    <!--模态框是覆盖在父窗体上的子窗体-->
    <!--触发的事件-->
    <button data-toggle="modal" data-target="#main" class="btn btn-primary">弹出模态框</button>
    <div class="modal" id="main">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header"> 头部<button data-dismiss="modal" class="close">&times;</button></div>
            <div class="modal-body">我是模态框</div>
            <div class="modal-footer"> <button class="btn btn-secondary" data-dismiss="modal">关闭</button> </div>
            <div></div>
            </div>
        </div>
    </div>

</body>
</html>